<template>
  <div id="PaymentMethodSetting">
    <div class="content">
      <div class="overflow-auto">
        <div class="body">
          <div class="top">
            <el-button type="primary" @click="addPayMethod" size="small">新增收款方式</el-button>
          </div>
          <el-form ref="PayMethods">
            <div class="PayMethods">
              <div v-for="(item, index) in PayMethods " :key="index">
                <el-button type="text" v-show="item.isEdit == false" @click="isEdit(item)" class="PayMethod">
                  <span>{{ item.name }}</span>
                </el-button>
                <!-- 新增 -->
                <div v-show="item.isEdit == true || item.name == ''" class="PayMethods-edit">
                  <el-input v-model="item.name" style="width:70px;margin-right:10px" size="mini"></el-input>
                  <el-button type="text" icon="el-icon-check" id="green-check" @click="CheckPayName(item)"></el-button>
                  <el-button type="text" id="red-close" icon="el-icon-close" @click="Close(item)"></el-button>
                </div>
              </div>
            </div>
          </el-form>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '../../css/PaymentMethodSetting.scss'
import { PayChannel } from '../../../../api/PaymentMethodSetting'
export default {
  Name: 'PaymentMethodSetting',
  components: {
  },
  data() {
    return {
      hotel_id: '',
      PayMethods: []
    }
  },
  methods: {
    isEdit(item) {
      if (item.isEdit == false) {
        item.isEdit = true
      }
      console.log("点击了", item);
    },
    async Close(item) {
      console.log(item);
      let data = {
        name: item.name,
        hotel_id: this.hotel_id,
        id: item.id
      }
      await PayChannel('DELETE', data).then(res => {
        if (res.data.message == '删除成功') {
          this.$message.error('删除成功');
        }
      })
      item.isEdit = false
      this.GetPayChannel('GET', this.hotel_id)
    },
    async CheckPayName(item) {
      this.hotel_id = sessionStorage.getItem('hotel_id')
      if (item.isNew == true) {
        console.log('新增');
        let data = {
          name: item.name,
          hotel_id: this.hotel_id
        }
        await PayChannel('POST', data).then(res => {
          if (res.data.message == "保存成功") {
            item.isEdit = false
            this.$message.success("保存成功")
          }
        })
      } else if (item.name != '') {
        console.log("修改");
        let data = {
          name: item.name,
          hotel_id: this.hotel_id,
          id: item.id
        }
        await PayChannel('PUT', data).then(res => {
          if (res.data.message == "保存成功") {
            this.$message.success("修改成功")
            item.isEdit = false
          }
        })
      }

    },
    // 添加付款渠道
    addPayMethod() {
      this.PayMethods.push({
        name: '',
        isEdit: true,
        isNew: true
      })
    },
    // 查看-付款渠道
    async GetPayChannel(method, hotel_id) {
      console.log(method, hotel_id);
      let data = {
        hotel_id: hotel_id
      }
      let paymethods
      await PayChannel(method, data).then(res => {
        paymethods = res.data.data.list
        paymethods.forEach(item => {
          item.isEdit = false
        })
      })
      console.log(paymethods, "paymethods");
      this.PayMethods = paymethods
      console.log(this.PayMethods);
    },

  },
  created() {
    this.hotel_id = sessionStorage.getItem('hotel_id')

    this.GetPayChannel('GET', this.hotel_id)
  }
}
</script>

<style scoped lang="scss">
.overflow-auto {
  width: calc(100% - 190px);
  height: calc(100% - 40px);
  padding: 20px;
  overflow: auto;
}
</style>